export default {
   name:"dlRow",
    props:{
      tag:{
        type:String,
        default:"div"
      },
      margin:{
        type:String,
        default:0
      },
      justify:{
        type:String,
        default:"start"
      },
      align:{
        type:String,
        default:"top"
      },
      type:{
        type:String,
        default:"flex"
      }
    },
    computed:{
      style(){
        let ret ={}
        if(this.margin){
          ret.marginTop = this.margin/2+"px"
          ret.marginBottom = ret.marginTop
        }
        return ret
      }
    },
   render:function(h){
      var classList = [];
     ["justify","align","type"].forEach(prop=>{
          if(prop=="justify"&&this[prop]!="start"){
              classList.push(  `dl-justify-${this[prop]}`)
          }else if(prop=="align"&&this[prop]!="top"){
              classList.push(`dl-align-${this.align}`)
          }
      })
     return h(this.tag,{
        class:[
          ...classList,`dl-row`,`dl-row-type-${this.type}`
        ],
        style:this.style
     },this.$slots.default)

   }
}